<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<style>
	blockquote#one {
		width: 450px;
		background: #e3e3e3;
		padding: 25px;
		position: relative;
	}
	
	#one .arrow {
		 width: 0;
		 height: 0;
		 line-height: 0;
		 border-top: 30px solid #e3e3e3;
		 border-left: 60px solid transparent;
		 border-right: 10px solid transparent;
		 position: absolute;
		 bottom: -30px;
		 right: 30px;
	}
	
	blockquote#two {
		width: 450px;
		background: #e3e3e3;
		padding: 25px;
		position: relative;
	}

	#two .arrow {
		width: 0;
		height: 0;
		line-height: 0;
		border-bottom: 25px solid #e3e3e3;
		border-right: 50px solid transparent;
		position: absolute;
		top: -24px;
		left: 20px;
	}
</style>

<script type="text/javascript">
	$(function(){
		$("#submit").click(function(){
			enviarComentario();
		});
	});
	
	function enviarComentario(){

		$.post('../tareas/guardarComentario', $('#comentario_form').serialize())
		.complete(function(){
			commentLoad();
    	});
		return false;
	}
	
	function commentLoad(){
		var ultimo = $("blockquote:last");
		var table = $("#commentsTable");
		var today = new Date();
		var usuario = $("#username").text();
		var titulo = $("#titulo").val();
		var contenido = $("#contenido").val();
		if (ultimo.attr("id") == "two"){
			table.append(
					'<tr><td><blockquote id="one"><div style="font-family: courier, ' +
					"'courier new', monospace;color: #ff0000;font-size: 11px;" +'">'+
					'El ' + today.toGMTString() + ', ' + usuario + ' dijo: </div><br />' +
					'<p>' + titulo + '<br />' + contenido + '</p><span class="arrow" /></blockquote></td><td></td></tr>'
				)
		}else{
				table.append(
					'<tr><td></td><td><blockquote id="two"><div style="font-family: courier, ' +
					"'courier new', monospace;color: #ff0000;font-size: 11px;" +'">'+
					'El ' + today.toGMTString() + ', ' + usuario + ' dijo: </div><br />' +
					'<p>' + titulo + '<br />' + contenido + '</p><span class="arrow" /></blockquote></td></tr>'
				)
		}
	}
</script>
<div id="comments">
	<table id="commentsTable">
		<s:iterator value="comentariosOrdenados" var="c" status="s">
			<s:if test="#s.odd == false">
				<tr>
					<td></td>
					<td>
						<blockquote id="<s:if test="#s.odd == true">one</s:if><s:else>two</s:else>">
							<div style="font-family: courier, 'courier new', monospace;color: #ff0000;font-size: 11px;">
								El <s:property value="#c.fechaAlta" />, <s:property value="#c.creador.nombre" /> dijo:
							</div><br />
							<p><s:property value="#c.titulo" /><br /><s:property value="#c.notas" /></p>
							<span class="arrow" /> 
						</blockquote> 
					</td>
				</tr>
			</s:if>
			<s:else>
				<tr>
					<td>
						<blockquote id="<s:if test="#s.odd == true">one</s:if><s:else>two</s:else>">
							<div style="font-family: courier, 'courier new', monospace;color: #ff0000;font-size: 11px;">
								El <s:property value="#c.fechaAlta" />, <s:property value="#c.creador.nombre" /> dijo:
							</div><br />
							<p><s:property value="#c.titulo" /><br /><s:property value="#c.notas" /></p>
							<span class="arrow" /> 
						</blockquote> 
					</td>
					<td></td>
				</tr>
			</s:else>

		</s:iterator>
	</table>
</div>
<p>Agregar un Comentario</p>
<s:form id="comentario_form">
		<s:hidden name="comentario.tarea.idTarea" value="%{tarea.idTarea}" />
		<s:hidden name="comentario.creador.idUsuario" value="%{#session.usuario.idUsuario}" />
		<table>
			
		 	<tr>
				<td>Usuario</td>
				<td id="username">${usuario.nombreCompleto}</td>
			</tr>
				<td>Título</td>
				<td><s:textfield id="titulo" name="comentario.titulo" theme="simple" cssClass="required" /></td>
			</tr>
			<tr>
				<td>Comentario</td>
				<td><s:textarea name="comentario.notas" theme="simple" cssClass="required" id="contenido"/></td>
			</tr>
		</table>
</s:form>
<input type="button" id="submit" value="Enviar" />
